<template>
  <div>
    <div style="z-index: 1000;" class="address-window" :class="value === true ? 'on' : ''">
      <div class="title">
        选择门店
        <span class="iconfont icon-guanbi" @click="closeShop"></span>
      </div>
      <div class="list" v-if="shops.length">
        <div
          class="item acea-row row-between-wrapper item_line"
          :class="item.id === checked ? 'font-color-red' : ''"
          v-for="(item, addressIndex) in shops"
          @click="tapShop(addressIndex)"
          :key="addressIndex"
        >
          <span class="iconfont icon-ditu" :class="item.id === checked ? 'font-color-red' : ''"></span>
          <div class="addressTxt">
            <div class="acea-row row-middle" :class="item.id === checked ? 'line1 font-color-red' : 'line1'">
              {{ item.name }} 
			  <text class="distance">距{{ item.distance }}km</text>
            </div>
            <div class="name" :class="item.id === checked ? 'font-color-red' : ''">
              {{ item.shopAddr || '' }}
            </div>
          </div>
          <span class="iconfont icon-complete" :class="item.id === checked ? 'font-color-red' : ''"></span>
        </div>
      </div>
    </div>
    <div class="mask" @touchmove.prevent :hidden="value === false" @click="closeShop"></div>
  </div>
</template>
<script>

export default {
  name: "ShopWindow",
  props: {
    shops: Array,
    value: Boolean,
    checked: Number
  },
  data: function() {
    return {
      current: 0,
    };
  },
  computed:{
	
  },
  methods: {
    closeShop() {
      this.$emit("input", false);
    },
    tapShop: function(index) {
      this.$emit("checked", this.shops[index]);
      this.$emit("input", false);
    }
  }
};
</script>
<style scoped>
	.item_line{
	  border-bottom: 1rpx solid #e4e4e4 !important;
	  margin: 0 30rpx;
	  padding: 20rpx 0;
	}
	.distance{
		font-size: 28rpx;
		margin-left: 12rpx;
		color: #666;
	}
</style>
